<template>
  <div id="wrapper">
          <div class="logo-wrapper">
          <img src="../assets/dm.png" alt="" class="logo">
          <div class="logo-wrapper2">
          <img src="../assets/man.png" alt="" class="logo2">
            <router-link :to="{
            name:'ss'
            }">
          <img src="../assets/f.png" alt="" class="logo3">
          </router-link>
          <router-link :to="{
            name:'w'
            }">
          <img src="../assets/t.png" alt="" class="logo4">
          </router-link>
          </div>
    </div>
    <div class="xh">
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item><img src="https://img.manhua.weibo.com/client/2020/02/20/lGv2HgFz.png" alt=""></van-swipe-item>
  <van-swipe-item><img src="https://img.manhua.weibo.com/client/2020/02/11/oulGltGb.png" alt=""></van-swipe-item>
  <van-swipe-item><img src="https://img.manhua.weibo.com/client/2020/02/11/CwpSK8Ua.png" alt=""></van-swipe-item>
  <van-swipe-item><img src="https://img.manhua.weibo.com/client/2019/10/28/1x2rsBl2.jpg" alt=""></van-swipe-item>
  <van-swipe-item><img src="https://img.manhua.weibo.com/client/2019/10/28/lM7nSEZH.jpg" alt=""></van-swipe-item>
  </van-swipe>
    </div>
    <div class="dh">
      <ul>
        <li>
          <router-link :to="{
            name:'fsb_jt'
            }">
          <img src="../assets/fs.png" alt=""><p>放送表</p>
          </router-link>
          </li>
        <li>
          <router-link :to="{
            name:'fl_xr'
            }">
          <img src="../assets/fl.png" alt=""><p>分类</p>
          </router-link>
          </li>
        <li>
          <router-link :to="{
            name:'bd_ydb'
            }">
          <img src="../assets/bd.png" alt=""><p>榜单</p>
          </router-link>
          </li>
        <li>
          <router-link :to="{
            name:'wj'
            }">
          <img src="../assets/wj.png" alt=""><p>完结</p>
          </router-link>
          </li>
      </ul>
    </div>
    <div class="jp">
      <div class="jp1">
        <img src="../assets/ink.png" alt="">
        <div class="jp2">
          <i>精品佳作</i>
          <div class="jp3">
            <span>更多></span>
          </div>
        </div>
      </div>
      <ul>
        <li v-for="(item) in jpList" :key="item.info_id">
          <div class="k1">
          <!-- <img :src="item.extra.hcover" alt=""> -->
          <img :src="item.image_ext_url" alt="">
          <p class="p1">{{item.extra.name}}</p>
          <p class="p2">{{item.extra.watching_focus}}</p>
          <br>
          </div>
          </li>
      </ul>
    </div>
    <div class="rq">
      <div class="rq1">
      <img src="../assets/ink.png" alt="">
            <div class="rq2">
          <i>人气作品</i>
          <div class="rq3">
            <span>更多></span>
          </div>
        </div>
      </div>
      <ul>
        <li v-for="(item) in rqList" :key="item.info_id">
          <div class="k2">
            <img :src="item.image_ext_url" alt="">
            <p class="p1">{{item.extra.name}}</p>
            <p class="p2">{{item.extra.watching_focus}}</p>
            <br>
          </div>
        </li>
      </ul>
  </div>
  <div class="zx">
    <div class="zx1">
    <img src="../assets/ink.png" alt="">
    <div class="zx2">
      <i>最新上架</i>
      <div class="zx3">
      <span>更多></span>
      </div>
    </div>
    </div>
    <ul>
      <li v-for="(item) in zxList" :key="item.info_id">
        <div class="k3">
        <img :src="item.image_ext_url" alt="">
        <div class="k4">
        <p class="p1">{{item.extra.name}}</p>
        <p class="p2">
          <img src="../assets/ink.png" alt="">
          {{item.extra.sina_nickname}}
          </p>
        </div>
        </div>
      </li>
    </ul>
  </div>
  <div class="rm">
    <div class="rm1">
    <img src="../assets/ink.png" alt="">
    <div class="rm2">
      <i>热门连载</i>
      <div class="rm3">
      <span>更多></span>
      </div>
    </div>
    </div>
    <ul>
      <li v-for="(item) in rmList" :key="item.info_id">
      <div class="k5">
        <img :src="item.image_ext_url" alt="">
        <p class="p1">{{item.extra.name}}</p>
        <p class="p2">{{item.extra.watching_focus}}</p>
        <br>
    </div>
      </li>
    </ul>
  </div>
  <div class="xb">
    <div class="xb1">
      <img src="../assets/ink.png" alt="">
      <div class="xb2">
      <i>小编推荐</i>
      <div class="xb3">
      <span>更多></span>
      </div>
      </div>
    </div>
    <ul>
      <li v-for="(item) in xbList" :key="item.info_id">
      <div class="k6">
      <img :src="item.image_ext_url" alt="">
      <p class="p1">{{item.extra.name}}</p>
      <p class="p2">{{item.extra.watching_focus}}</p>
      <br>
    </div>
      </li>
    </ul>
  </div>
  <div class="bz">
    <div class="bz1">
    <img src="../assets/ink.png" alt="">
    <div class="bz2">
    <i>本周推荐</i>
    <div class="bz3">
    <span>更多></span>
    </div>
    </div>
    </div>
    <ul>
      <li v-for="(item) in bzList" :key="item.info_id">
        <div class="k7">
      <img :src="item.image_ext_url" alt="">
      <p class="p1">{{item.extra.name}}</p>
      <p class="p2">{{item.extra.watching_focus}}</p>
      <br>
      <br>
        </div>
      </li>
    </ul>
  </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      jpList:[],
      rqList:[],
      zxList:[],
      rmList:[],
      xbList:[],
      bzList:[]
    }
  },
  created() {
    this.$axios.get('page_recommend_list?mca=h5_recommend_male&_type=h5').then((res) => {
      console.log(res.data);
      this.jpList = res.data.data.h5_recommend_male_fine_works;
      this.rqList = res.data.data.h5_recommend_male_popular_works;
      this.zxList = res.data.data.h5_recommend_male_new_arrival;
      this.rmList = res.data.data.h5_recommend_male_hot_serial;
      this.xbList = res.data.data.h5_recommend_male_xiaobian_recommend;
      this.bzList = res.data.data.h5_recommend_male_week_recommend;
      // console.log(this.jpList);
    })
  }
}
</script>

<style>
body{
  background-color: #F8F8F8;
}
.logo-wrapper{
  border-bottom: .0625rem /* 1/16 */ solid #E6E6E6;
  height: 2.8125rem /* 45/16 */;
}
.logo-wrapper2{
    float: right;
}
.logo{
    margin-top: .625rem /* 10/16 */;
    margin-left: 1.25rem /* 20/16 */;
    width: 5.4375rem /* 103/16 */;
    height: 1.5rem /* 24/16 */;
}
.logo2{
    width: 2.75rem /* 44/16 */;
    height: 2.75rem /* 44/16 */;
}
.logo3{
    width: 2.75rem /* 44/16 */;
    height: 2.75rem /* 44/16 */;
}
.logo4{
    width: 2.75rem /* 44/16 */;
    height: 2.75rem /* 44/16 */;
}
.xh{
  height: 14.375rem /* 230/16 */;
  text-align: center;
  background-color: #fff;
}
.my-swipe{
  width: 21.4375rem /* 343/16 */;
  height: 13.375rem /* 214/16 */;
  margin: .625rem /* 10/16 */ 1.05rem;
}
.my-swipe img{
  width: 100%;
  height: 100%;
  border-radius: .5rem;
}
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 1.25rem /* 20/16 */;
    background-color: #39a9ed;
  }
.dh{
  height: 6.25rem /* 100/16 */;
  /* background-color: gold; */
  background-color: #fff;
}
.dh ul{
  height: 6.25rem /* 100/16 */;
  /* border: 1px solid green; */
}
.dh ul li{
  width: 5.825rem /* 93.2/16 */;
  height: 6.125rem /* 98/16 */;
  /* border: 1px solid cyan; */
  float: left;
  text-align: center;
}
.dh ul li img{
  width: 3.75rem /* 60/16 */;
  height: 3.75rem /* 60/16 */;
  margin: .3125rem /* 5/16 */ 0;
}
.dh ul li p{
    font-size: .875rem;
    color: #333;
}
.jp{
  margin-top: .625rem /* 10/16 */;
  height: 20.9rem /* 250/16 */;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}
.jp1{
  height: 1.875rem /* 30/16 */;
  background-color: #fff;
}
.jp1 img{
  width: 1.375rem /* 22/16 */;
  height: 1.375rem /* 22/16 */;
  position: absolute;
  top: .1875rem /* 3/16 */;
  left: .9375rem /* 15/16 */;
}
.jp2{
  font-size: 1.125rem;
  color: #666;
  padding-left: 2.5rem /* 40/16 */;
  align-items: center;
}
.jp2 i{
  position: absolute;
  top: .25rem /* 4/16 */;
}
i{
  font-style:normal;
}
.jp3{
  margin-left: 16.875rem /* 270/16 */;
  font-size: .75rem;
  color: #fff;
  width: 2.625rem;
  height: 1.25rem;
  text-align: center;
  line-height: 1.375rem;
  background: #4a90e2;
  border-radius: .625rem;
  position: absolute;
  top: .3125rem /* 5/16 */;
  left: 3.125rem /* 50/16 */;
}
.k1{
  float: left;
  /* flex-wrap: wrap */
}
.k1 img{
  width: 10.46875rem /* 167.5/16 */;
  height: 5.625rem /* 90/16 */;
  border-radius: 0.5rem;
  margin: .25rem /* 4/16 */ .625rem /* 10/16 */;
  display: block;
}
.k1 p{
  margin: 0 .9375rem /* 15/16 */;
}
.k1 .p1{
  font-size: 0.875rem;
  color: #666;
}
.k1 .p2{
  color: #999;
  font-size: 0.75rem;
  padding: .3125rem /* 5/16 */ 0;
}
.rq{
  height: 20.9rem /* 250/16 */;
  /* background-color: chartreuse; */
  background-color: #fff;
  margin-top: 0.625rem /* 10/16 */;
  position: relative;
  overflow: hidden;
}
.rq1{
  height: 1.875rem /* 30/16 */;
  background-color: #fff;
}
.rq1 img{
  width: 1.375rem /* 22/16 */;
  height: 1.375rem /* 22/16 */;
  position: absolute;
  top: .1875rem /* 3/16 */;
  left: .9375rem /* 15/16 */;
}
.rq2{
  font-size: 1.125rem;
  color: #666;
  padding-left: 2.5rem /* 40/16 */;
  align-items: center;
}
.rq2 i{
  position: absolute;
  top: .25rem /* 4/16 */;
}
.rq3{
  margin-left: 16.875rem /* 270/16 */;
  font-size: .75rem;
  color: #fff;
  width: 2.625rem;
  height: 1.25rem;
  text-align: center;
  line-height: 1.375rem;
  background: #4a90e2;
  border-radius: .625rem;
  position: absolute;
  top: .3125rem /* 5/16 */;
  left: 3.125rem /* 50/16 */;
}
.k2{
  float: left;
  /* flex-wrap: wrap */
}
.k2 img{
  width: 10.46875rem /* 167.5/16 */;
  height: 5.625rem /* 90/16 */;
  border-radius: 0.5rem;
  margin: .25rem /* 4/16 */ .625rem /* 10/16 */;
  display: block;
}
.k2 p{
  margin: 0 .9375rem /* 15/16 */;
}
.k2 .p1{
  font-size: 0.875rem;
  color: #666;
}
.k2 .p2{
  color: #999;
  font-size: 0.75rem;
  padding: .3125rem /* 5/16 */ 0;
}
.zx{
  height: 22.5rem /* 250/16 */;
  /* background-color: chartreuse; */
  background-color: #fff;
  margin-top: 0.625rem /* 10/16 */;
  position: relative;
  overflow: hidden;
}
.zx1{
  height: 1.875rem /* 30/16 */;
  background-color: #fff;
}
.zx1 img{
  width: 1.375rem /* 22/16 */;
  height: 1.375rem /* 22/16 */;
  position: absolute;
  top: .1875rem /* 3/16 */;
  left: .9375rem /* 15/16 */;
}
.zx2{
  font-size: 1.125rem;
  color: #666;
  padding-left: 2.5rem /* 40/16 */;
  align-items: center;
}
.zx2 i{
  position: absolute;
  top: .25rem /* 4/16 */;
}
.zx3{
  margin-left: 16.875rem /* 270/16 */;
  font-size: .75rem;
  color: #fff;
  width: 2.625rem;
  height: 1.25rem;
  text-align: center;
  line-height: 1.375rem;
  background: #4a90e2;
  border-radius: .625rem;
  position: absolute;
  top: .3125rem /* 5/16 */;
  left: 3.125rem /* 50/16 */;
}
.k3{
  position: relative;
}
.k3 img{
  width: 10.46875rem /* 167.5/16 */;
  height: 5.625rem /* 90/16 */;
  border-radius: 0.5rem;
  margin: .95rem /* 4/16 */ .625rem /* 10/16 */;
  display: block;
}
.k4{
  width: 11.85rem /* 156/16 */;
  height: 5.6875rem /* 91/16 */;
  border: .0625rem 1/16 solid violet;
  position: absolute;
  top: 0;
  left: 11.375rem /* 182/16 */;
}
.k4 .p1{
  font-size: 1rem;
  color: #333;
}
.k4 .p2{
  width: 4.375rem /* 70/16 */;
  /* border: 1px solid pink; */
  color: #333;
  font-size: 0.75rem;
  /* padding: .3125rem 5/16 0; */
  margin-top: 3.05rem /* 48.8/16 */;
  margin-left: .9380rem /* 15/16 */;
}
.k4 img{
  width: 1rem /* 16/16 */;
  height: 1rem /* 16/16 */;
  position: absolute;
  top: 3.0625rem /* 33/16 */;
  left: -.625rem /* 10/16 */;
}
.rm{
  height: 11rem /* 250/16 */;
  /* background-color: chartreuse; */
  background-color: #fff;
  margin-top: 0.625rem /* 10/16 */;
  position: relative;
  overflow: hidden;
}
.rm1{
  height: 1.875rem /* 30/16 */;
  background-color: #fff;
}
.rm1 img{
  width: 1.375rem /* 22/16 */;
  height: 1.375rem /* 22/16 */;
  position: absolute;
  top: .1875rem /* 3/16 */;
  left: .9375rem /* 15/16 */;
}
.rm2{
  font-size: 1.125rem;
  color: #666;
  padding-left: 2.5rem /* 40/16 */;
  align-items: center;
}
.rm2 i{
  position: absolute;
  top: .25rem /* 4/16 */;
}
.rm3{
  margin-left: 16.875rem /* 270/16 */;
  font-size: .75rem;
  color: #fff;
  width: 2.625rem;
  height: 1.25rem;
  text-align: center;
  line-height: 1.375rem;
  background: #4a90e2;
  border-radius: .625rem;
  position: absolute;
  top: .3125rem /* 5/16 */;
  left: 3.125rem /* 50/16 */;
}
.k5{
  float: left;
  /* flex-wrap: wrap */
}
.k5 img{
  width: 10.46875rem /* 167.5/16 */;
  height: 5.625rem /* 90/16 */;
  border-radius: 0.5rem;
  margin: .25rem /* 4/16 */ .625rem /* 10/16 */;
  display: block;
}
.k5 p{
  margin: 0 .9375rem /* 15/16 */;
}
.k5 .p1{
  font-size: 0.875rem;
  color: #666;
}
.k5 .p2{
  color: #999;
  font-size: 0.75rem;
  padding: .3125rem /* 5/16 */ 0;
}
.xb{
  height: 20.9rem /* 250/16 */;
  /* background-color: chartreuse; */
  background-color: #fff;
  margin-top: 0.625rem /* 10/16 */;
  position: relative;
  overflow: hidden;
}
.xb1{
  height: 1.875rem /* 30/16 */;
  background-color: #fff;
}
.xb1 img{
  width: 1.375rem /* 22/16 */;
  height: 1.375rem /* 22/16 */;
  position: absolute;
  top: .1875rem /* 3/16 */;
  left: .9375rem /* 15/16 */;
}
.xb2{
  font-size: 1.125rem;
  color: #666;
  padding-left: 2.5rem /* 40/16 */;
  align-items: center;
}
.xb2 i{
  position: absolute;
  top: .25rem /* 4/16 */;
}
.xb3{
  margin-left: 16.875rem /* 270/16 */;
  font-size: .75rem;
  color: #fff;
  width: 2.625rem;
  height: 1.25rem;
  text-align: center;
  line-height: 1.375rem;
  background: #4a90e2;
  border-radius: .625rem;
  position: absolute;
  top: .3125rem /* 5/16 */;
  left: 3.125rem /* 50/16 */;
}
.k6{
  float: left;
  /* flex-wrap: wrap */
}
.k6 img{
  width: 10.46875rem /* 167.5/16 */;
  height: 5.625rem /* 90/16 */;
  border-radius: 0.5rem;
  margin: .25rem /* 4/16 */ .625rem /* 10/16 */;
  display: block;
}
.k6 p{
  margin: 0 .9375rem /* 15/16 */;
}
.k6 .p1{
  font-size: 0.875rem;
  color: #666;
}
.k6 .p2{
  color: #999;
  font-size: 0.75rem;
  padding: .3125rem /* 5/16 */ 0;
}
.bz{
  height: 14.7rem /* 250/16 */;
  /* background-color: chartreuse; */
  background-color: #fff;
  margin-top: 0.625rem /* 10/16 */;
  position: relative;
  overflow: hidden;
}
.bz1{
  height: 1.875rem /* 30/16 */;
  background-color: #fff;
}
.bz1 img{
  width: 1.375rem /* 22/16 */;
  height: 1.375rem /* 22/16 */;
  position: absolute;
  top: .1875rem /* 3/16 */;
  left: .9375rem /* 15/16 */;
}
.bz2{
  font-size: 1.125rem;
  color: #666;
  padding-left: 2.5rem /* 40/16 */;
  align-items: center;
}
.bz2 i{
  position: absolute;
  top: .25rem /* 4/16 */;
}
.bz3{
  margin-left: 16.875rem /* 270/16 */;
  font-size: .75rem;
  color: #fff;
  width: 2.625rem;
  height: 1.25rem;
  text-align: center;
  line-height: 1.375rem;
  background: #4a90e2;
  border-radius: .625rem;
  position: absolute;
  top: .3125rem /* 5/16 */;
  left: 3.125rem /* 50/16 */;
}
.k7{
  float: left;
  /* flex-wrap: wrap */
}
.k7 img{
  width: 6.8125rem /* 109/16 */;
  height: 9.375rem /* 150/16 */;
  border-radius: 0.5rem;
  margin: .25rem /* 4/16 */ .625rem /* 10/16 */;
  display: block;
}
.k7 .p1{
  width: 7rem /* 100/16 */;
  height: 1.3125rem /* 21/16 */;
  /* border: .0625rem 1/16 solid black; */
  font-size: 0.875rem;
  color: #666;
  margin-left: .625rem /* 10/16 */;
  margin-top: 0;
  text-align: center;
}
.k7 .p2{
  width: 5.625rem /* 90/16 */;
  height: 1.125rem /* 18/16 */;
  /* border: 1px solid black; */
  color: #999;
  font-size: 0.75rem;
  padding: .3125rem /* 5/16 */ 0;
  overflow: hidden;
  margin-left: 1.5625rem /* 25/16 */;
  margin-top: -.3125rem /* 5/16 */;
}
.bz ul li:nth-child(2){
  position: absolute;
  top: 1.875rem /* 30/16 */;
  left: 7.6875rem /* 123/16 */;
}
.bz ul li:nth-child(3){
  position: absolute;
  top: 1.875rem /* 30/16 */;
  left: 15.4375rem /* 247/16 */;
}
.bz ul li:nth-child(4){
  opacity:0;
}
</style>